﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="description" content="薛冰川的web前端个人简历。">
    <meta name="keywords"
          content="web前端，Mr.Big, 薛冰川，web前端个人简历，前端开发简历网站，薛冰川的简历，前端工程师简历, web前端开发, web前端培训, web前端工程师， 前端简历网站">
    <meta name="author" content="Mr.Big">
    <meta name="fragment" content="!">
    <title>MeCC-web前端工程师简历</title>
    <link rel="shotcut icon" href="./images/mecc/favicon.ico" type="image/x-icon">
    <!--[if IE]>
    <script type="text/javascript">
        alert("本页面在IE浏览器下可能存在部分问题，为了您的最佳体验，建议您采用Chrome、Firefox、Opera、Microsoft Edge等现代浏览器!")
    </script><![endif]-->
    <link rel="stylesheet" media="screen and (min-width: 768px)" href="./stylesheets/mecc/index.css">
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="./stylesheets/mecc/index-mobile.css">
    <link rel="stylesheet" href="./stylesheets/mecc/swiper.css">
    <link rel="stylesheet" media="screen and (min-width: 768px)" href="./stylesheets/mecc/card-style.css">
    <link rel="stylesheet" media="screen and (min-width: 768px)" href="./stylesheets/mecc/skill-cube.css">
    <link rel="stylesheet" media="screen and (min-width: 768px)" href="./stylesheets/mecc/s-project.css">
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="./stylesheets/mecc/s-project-mobile.css">
</head>

<style>
    /* #boke {
        height: 100%;
        width: 100%;
    } */
    .s-pro-direction{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .s-pro-header{
     position: unset !important;
    }
</style>

<body onselectstart="return false">
<div class="pageLoading">
    <div class="monster">
        <div class="eye">
            <div class="eyeball"></div>
        </div>
        <div class="mouth"></div>
    </div>
    <div class="loading">
        <div class="bar"></div>
    </div>
</div>
<header class="header-info">
    <section class="info"><img src="./images/mecc/photo.jpg" alt="">
        <div><span>MeCC</span> <i>'s</i> resume</div>
    </section>
    <section class="music-player">
        <div id="mymusic" class="music-img mymusic"></div>
        <div class="music-control mymusic"></div>
    </section>
</header>
<div class="swiper-container" id="swiper-pc">
    <div class="swiper-wrapper">
        <div class="swiper-slide s-index">
            <div class="s-info-box">
                <div class="project-list">
                    <div class="project">
                        <div class="project__card"><a href="" class="project__image"><img
                                src="./images/mecc/blank.png" width=600 height=500 alt=""></a>
                            <div class="project__detail">
                                <h2 class="project__title">Hello, I'm MCC</h2> <small class="project__category"><a
                                    href="#">Great hopes make great man.</a></small>
                                <p class="s-p1">我叫薛冰川,芳龄28</p>
                                <p class="s-p2">有着5年勤学苦问的工作沉淀,正在努力向更高的技术看齐...</p>
                                <p class="s-mailbox">xuebingchuan_20@163.com</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide s-aboutme">
            <div class="s-big-photo"></div>
            <section class="s-aboutme-desc">
                <p class="s-desc-p1">
                    您好，我叫薛冰川，坐标深圳南山区。近几年一直从事前端开发工作，一直怀揣着一颗不断进去的决心,希望可以成为一名更加优秀的前端开发人员，今后的职业规划是朝着全栈发展。
                </p>
                <p class="s-desc-p2">认准了一个目标，就去拼命实现，遇到困难就想办法解决，执行力Max。</p>
            </section>
        </div>
        <div class="swiper-slide s-skill">
            <section class="s-skill-title"> My Skills</section>
            <section class="s-skill-cube-wrapper">
                <ul>
                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc//vue.png" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:#808080;color:#fff;">
                                <h2>Vue</h2>
                                <p>熟悉Vue</p>
                            </div>
                        </div>
                    </li>
                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/jquery.png" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:#0769ad;color:#fff;">
                                <h2>jQuery</h2>
                                <p>熟悉jQuery</p>
                            </div>
                        </div>
                    </li>
                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/html5.jpg" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:#fff;color:#000;">
                                <h2 style="text-shadow:.1rem .1rem .1rem #fff;">HTML5</h2>
                                <p>熟悉HTML5</p>
                            </div>
                        </div>
                    </li>
                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/css3.jpg" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:rgb(246,246,246);color:#000;">
                                <h2 style="text-shadow:.1rem .1rem .1rem #fff;">CSS3</h2>
                                <p>熟悉CSS3</p>
                            </div>
                        </div>
                    </li>
                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/es6.jpg" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:rgb(240,219,78);color:#fff;">
                                <h2>ES6</h2>
                                <p style="color:#000;">基础扎实，熟悉原生JS和ES6新语法</p>
                            </div>
                        </div>
                    </li>
                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/bootstrap.png" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:#758a99;color:#fff;">
                                <h2>BootStrap</h2>
                                <p>熟练使用BootStrap</p>
                            </div>
                        </div>
                    </li>
                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/xiaochengxu.jpg" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:rgb(170,239,133);color:#000;">
                                <h2 style="text-shadow:.1rem .1rem .1rem #fff;">微信小程序</h2>
                                <p style="color:#000;">熟悉小程序开发，理解数据驱动的核心思想</p>
                            </div>
                        </div>
                    </li>

                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/git.png" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:#f2be45;color:#fff;">
                                <h2>Git</h2>
                                <p style="color:#000;">程序员必备利器！熟悉并经常使用Git管理代码！</p>
                            </div>
                        </div>
                    </li>
                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/node.png" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:#333;color:#fff;">
                                <h2>Node.js</h2>
                                <p>熟悉Node.js</p>
                            </div>
                        </div>
                    </li>
                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/webpack.png" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:#2b3a42;color:#fff;">
                                <h2>Webpack</h2>
                                <p>熟悉Webpack</p>
                            </div>
                        </div>
                    </li>

                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/react.png" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:#282c34;color:#fff;">
                                <h2>React</h2>
                                <p>熟悉React</p>
                            </div>
                        </div>
                    </li>
                    <li class="s-skill-cube-li">
                        <div class="s-skill-cube">
                            <div class="s-skill-cube-show"><img src="./images/mecc/gulp.png" alt=""></div>
                            <div class="s-skill-cube-hide" style="background:#cf4646;color:#fff;">
                                <h2>gulp</h2>
                                <p>熟悉gulp</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
            <section class="s-skill-foot"> ———— 更多技能 正在充电 ————</section>
        </div>
        <div class="swiper-slide s-project">
            <section class="s-project-title"> My Projects</section>
            <section class="s-pro-wrapper s-pro-init" id="s-pro-pc">
                <ul class="s-pro-content">
                    <li class="s-pro-item">
                        <div class="s-pro-inner">
                            <div class="s-pro-bg" style="background-image: url('./images/mecc/bgc1.png')"></div>
                            <div class="s-pro-title">
                                <h2><br>多<br>端<br>兼<br>容</h2>
                            </div>
                            <div id="my" class="s-pro-direction">
                                <div class="s-pro-header">
                                    隆胜物联网公司官网
                                    <br>

                                    责任描述:请查看简历
                                    <br>
                                    <a href="https://www.boomingnewtech.com/index.html#/">点击前往</a>
                                </div>
                                <svg class="icon s-pro-close" aria-hidden="true">
                                    <use xlink:href="#icon-ziyuanldpi"></use>
                                </svg>
                            </div>
                        </div>
                    </li>
                    <li class="s-pro-item">
                        <div class="s-pro-inner" >
                            <div class="s-pro-bg" style="background-size :contain no-repeat;background-image: url('./images/mecc/bgc2.png')"></div>
                            <div class="s-pro-title">
                                <h2><br>银<br>座<br>网<br>上<br>商<br>城</h2>
                            </div>
                            <div id="two" class="s-pro-direction">
                                <div class="s-pro-header">负责部分:迭代
                                    <br>
                                    责任描述:请查看简历
                                    <br>
                                    <a href="http://www.yinzuo100.com/">点击前往</a></div>
                                <svg
                                        class="icon s-pro-close" aria-hidden="true">
                                    <use xlink:href="#icon-ziyuanldpi"></use>
                                </svg>
                            </div>
                        </div>
                    </li>
                    <li class="s-pro-item">
                        <div class="s-pro-inner">
                            <div class="s-pro-bg"></div>
                            <div class="s-pro-title">
                                <h2>贵<br>州<br>联<br>通<br>自<br>主<br>交<br>付</h2>
                            </div>
                            <div id="three" class="s-pro-direction">
                                <div class="s-pro-header">构建模板:

                                    <br>
                                    责任描述:请查看简历
                                    <br>
                                    <a href="https://panjiachen.github.io/vue-element-admin/#/login?redirect=%2Fi18n%2Findex">点击前往</a>
                                </div>
                                <svg class="icon s-pro-close" aria-hidden="true">
                                    <use xlink:href="#icon-ziyuanldpi"></use>
                                </svg>
                            </div>
                        </div>
                    </li>
                    <!----------------------------------------------------------------------------------------------  -->
                    <li class="s-pro-item">
                        <div class="s-pro-inner">
                            <div class="s-pro-bg" style="background-size :contain no-repeat;background-image: url('./images/mecc/bgc3.png')"></div>
                            <div class="s-pro-title">
                                <h2>个<br>人<br>博<br>客<br></h2>
                            </div>

                            <div style="height:100%; width: 100%; display: flex;justify-content: center;align-items: center"
                                 class="s-pro-direction">
                                <div class="s-pro-header">
                                    博客地址:

                                    <br>
                                    责任描述:请查看简历
                                    <br>
                                    <a style="cursor: not-allowed;" class="boke">点击跳转</a>
                                </div>
                                <svg class="icon s-pro-close" aria-hidden="true">
                                    <use xlink:href="#icon-ziyuanldpi"></use>
                                </svg>
                            </div>


                        </div>
                    </li>

                </ul>
            </section>
            <section class="s-project-foot"> ———— 更多项目 正在上线 ————</section>
        </div>
        <div class="swiper-slide s-contact">
            <div class="s-contact-title"> Contact Me</div>
            <div class="s-contact-content">
                <section class="s-contact-desc">
                    <p>我是一名对编程满怀热情,对未来充满期待的秃头程序员</p>
                    <p>因为对代码的热情让我走进Web前端</p>
                    <p>The meaning of life is to struggle</p>
                    <p>前路漫漫 道阻且长</p>
                    <p>博观而约取 厚积而薄发</p>
                    <p>与君共勉 携手未来</p>
                    <canvas id="canvas" width="auto" height="auto"></canvas>
                </section>
                <section class="s-contact-link"><a href="#">
                    <svg class="icon gitHub" aria-hidden="true">
                        <use xlink:href="#icon-github"></use>
                    </svg>
                    <span class="info-only ">Github</span></a> <a href="#">
                    <svg class="icon"
                         aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                    <span class="qqcode"
                          style="background-image: url('./images/mecc/qqcode.jpg')"></span></a> <a
                        href="javascript:;">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wechat"></use>
                    </svg>
                    <span style="background-image: url('./images/mecc/wechatcode.jpg')"></span></a> <a
                        href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
<!--                    <span class="info-only">新浪微博</span></a> <a href="#">-->
<!--                    <svg class="icon"-->
<!--                         aria-hidden="true">-->
<!--                        <use xlink:href="#icon-zhihu"></use>-->
<!--                    </svg>-->
<!--                    <span class="info-only">知乎</span>-->
<!--                </a>-->
                </section>
            </div>
            <!--            <a href="javascript:location.reload();" class="fuli">一键切换动漫福利</a>-->
            <div class="s-web-info"><span>© MeCC | <a href="#">豫ICP备2023002247号</a></span></div>
        </div>
        comment
    </div>
    <div class="swiper-pagination"></div>
</div>


<div class="swiper-container" id="swiper-mobile">
    <div class="swiper-wrapper">
        <div class="swiper-slide s-index">
            <section class="s-index-info">
                <div class="s-index-photo">
                    <div class="s-big-photo"></div>
                    <canvas id="canvas-fire"></canvas>
                </div>
                <div class="s-index-slogan">
                    <h2>Hello, I'm MeCC</h2>
                    <h3>Great hopes make great man</h3>
                    <p>我叫薛冰川</p>
                    <p>有着5年勤学苦问的工作沉淀,正在努力向更高的技术看齐...</p>
                    <p class="s-slogan-mail">xuebingchuan_20@163.com</p>
                </div>
            </section>
            <section class="s-index-contact"><i>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
                 <a href="#" target="_blank" class="info-only">前往Github</a>
            </i>
                <i>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                    <a href="#" target="_blank"
                       class="qqcode" style="background-image: url('./images/mecc/qqcode.jpg')"></a></i> <i>
                    <svg
                            class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wechat"></use>
                    </svg>
                    <a href="javascript:;"
                       style="background-image: url('./images/mecc/wechatcode.jpg')"></a></i> <i>
                    <svg class="icon"
                         aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                    <a href="#" target="_blank" class="info-only">前往新浪微博</a></i>
                <i>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhihu"></use>
                    </svg>
                    <a href="#" class="info-only"
                       target="_blank">前往知乎</a></i>
            </section>
        </div>
        <div class="swiper-slide s-aboutme">
            <section class="s-aboutme-title"> ABOUT ME</section>
            <section class="s-aboutme-keyword">
                <section class="keyword-row">
                    <div class="keyword-age">
                        <div class="keyword-img">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shijian"></use>
                            </svg>
                        </div>
                        <div class="keyword-desc">年龄/28岁</div>
                    </div>
                    <div class="keyword-study">
                        <div class="keyword-img">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xueli"></use>
                            </svg>
                        </div>
                        <div class="keyword-desc">学历/专科</div>
                    </div>
                </section>
                <section class="keyword-row">
                    <div class="keyword-location">
                        <div class="keyword-img">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dingwei"></use>
                            </svg>
                        </div>
                        <div class="keyword-desc">坐标/深圳</div>
                    </div>
                    <div class="keyword-status">
                        <div class="keyword-img">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-Icon-liuchengzhikong"></use>
                            </svg>
                        </div>
                        <div class="keyword-desc">状态/在职</div>
                    </div>
                </section>
            </section>
            <section class="s-aboutme-textarea">
                <p>您好，我叫薛冰川，坐标深圳南山区。近几年一直从事前端开发工作，一直怀揣着一颗不断进去的决心,希望可以成为一名更加优秀的前端开发人员，今后的职业规划是朝着全栈发展。
                </p>
                <p>认准了一个目标，就去拼命实现，遇到困难就想办法解决，执行力Max。</p>
            </section>
        </div>
        <div class="swiper-slide s-skill">
            <section class="s-skill-title"> My Skills</section>
            <section class="s-skill-detail">
                <section class="skill-row">
                    <ul>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front" style="background-image:url('./images/mecc/html5.jpg')">
                                </div>
                                <div class="skill-behind" style="background:#fff;color:#000;">
                                    <h2 style="text-shadow:.1rem .1rem .1rem #fff;">HTML5</h2>
                                    <p>熟悉HTML5</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front" style="background-image:url('./images/mecc/css3.jpg')">
                                </div>
                                <div class="skill-behind" style="background:rgb(246,246,246);color:#000;">
                                    <h2 style="text-shadow:.1rem .1rem .1rem #fff;">CSS3</h2>
                                    <p>熟悉CSS3</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front" style="background-image:url('./images/mecc/es6.jpg')">
                                </div>
                                <div class="skill-behind" style="background:rgb(240,219,78);color:#fff;">
                                    <h2>ES6</h2>
                                    <p style="color:#000;">基础扎实，熟悉原生JS和ES6新语法</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </section>
                <section class="skill-row">
                    <ul>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front" style="background-image:url('./images/mecc/jquery.png')">
                                </div>
                                <div class="skill-behind" style="background:#0769ad;color:#fff;">
                                    <h2>jQuery</h2>
                                    <p>熟悉jQuery</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front"
                                     style="background-image:url('./images/mecc/bootstrap.png')"></div>
                                <div class="skill-behind" style="background:#758a99;color:#fff;">
                                    <h2>BootStrap</h2>
                                    <p>熟练使用BootStrap</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front" style="background-image:url('./images/mecc/vue.png')">
                                </div>
                                <div class="skill-behind" style="background:#808080;color:#fff;">
                                    <h2>Vue</h2>
                                    <p>熟悉Vue</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </section>
                <section class="skill-row">
                    <ul>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front" style="background-image:url('./images/mecc/webpack.png')">
                                </div>
                                <div class="skill-behind" style="background:#2b3a42;color:#fff;">
                                    <h2>Webpack</h2>
                                    <p>熟悉Webpack</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front" style="background-image:url('./images/mecc/gulp.png')">
                                </div>
                                <div class="skill-behind" style="background:#cf4646;color:#fff;">
                                    <h2>gulp</h2>
                                    <p>熟悉gulp</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front" style="background-image:url('./images/mecc/git.png')">
                                </div>
                                <div class="skill-behind" style="background:#f2be45;color:#fff;">
                                    <h2>Git</h2>
                                    <p style="color:#000;">程序员必备利器！熟悉并经常使用Git管理代码！</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </section>
                <section class="skill-row">
                    <ul>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front" style="background-image:url('./images/mecc/node.png')">
                                </div>
                                <div class="skill-behind" style="background:#333;color:#fff;">
                                    <h2>Node.js</h2>
                                    <p>熟悉Node.js语法及Express框架，能够快速搭建服务器。</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front"
                                     style="background-image:url('./images/mecc/xiaochengxu.jpg')"></div>
                                <div class="skill-behind" style="background:rgb(170,239,133);color:#000;">
                                    <h2 style="text-shadow:.1rem .1rem .1rem #fff;">微信小程序</h2>
                                    <p style="color:#000;">熟悉小程序开发，理解数据驱动的核心思想</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="skill-stage">
                                <div class="skill-front" style="background-image:url('./images/mecc/react.png')">
                                </div>
                                <div class="skill-behind" style="background:#282c34;color:#fff;">
                                    <h2>React</h2>
                                    <p>熟悉React</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </section>
            </section>
            <section class="s-skill-foot"> ———— 更多技能 正在充电 ————</section>
        </div>
        <div class="swiper-slide s-project">
            <section class="s-project-title"> My Projects</section>
            <section class="s-pro-wrapper s-pro-init" id="s-pro-mb">
                <ul class="s-pro-content">
                    <li class="s-pro-item">
                        <div class="s-pro-inner">
                            <div class="s-pro-bg"></div>
                            <div class="s-pro-title">
                                <h2>隆胜物联网公司官网</h2>
                            </div>
                            <div class="s-pro-direction">
                                <div class="s-pro-header"></div>
                                <div class="s-pro-arrow" style="justify-content: center;align-items: center">
                                    <a style="color: white;font-size: 24px" href="https://www.boomingnewtech.com/index.html#/">点击前往</a>
                                    <!--                                    <div class="arrow-left"></div>-->
                                    <!--                                    <div class="arrow-right"></div>-->
                                </div>
                                <svg class="icon s-pro-close" aria-hidden="true">
                                    <use xlink:href="#icon-ziyuanldpi"></use>
                                </svg>
                            </div>
                        </div>
                    </li>
                    <li class="s-pro-item">
                        <div class="s-pro-inner">
                            <div class="s-pro-bg"></div>
                            <div class="s-pro-title">
                                <h2>银座网上商城</h2>
                            </div>
                            <div class="s-pro-direction">
                                <div class="s-pro-header"></div>
                                <div class="s-pro-arrow" style="justify-content: center;align-items: center">
                                    <a style="color: white;font-size: 24px" href="http://www.yinzuo100.com/">点击前往</a>
                                    <!--                                    <div class="arrow-left"></div>-->
                                    <!--                                    <div class="arrow-right"></div>-->
                                </div>
                                <svg class="icon s-pro-close" aria-hidden="true">
                                    <use xlink:href="#icon-ziyuanldpi"></use>
                                </svg>
                            </div>
                        </div>
                    </li>
                    <li class="s-pro-item">
                        <div class="s-pro-inner">
                            <div class="s-pro-bg"></div>
                            <div class="s-pro-title">
                                <h2>贵州联通自主交付</h2>
                            </div>
                            <div class="s-pro-direction">
                                <div class="s-pro-header"></div>
                                <div class="s-pro-arrow" style="justify-content: center;align-items: center">
                                    <a style="color: white;font-size: 24px" href="https://panjiachen.github.io/vue-element-admin/#/login?redirect=%2Fi18n%2Findex">点击前往</a>
                                    <!--                                    <div class="arrow-left"></div>-->
                                    <!--                                    <div class="arrow-right"></div>-->
                                </div>
                                <svg class="icon s-pro-close" aria-hidden="true">
                                    <use xlink:href="#icon-ziyuanldpi"></use>
                                </svg>
                            </div>
                        </div>
                    </li>
                    <li class="s-pro-item">
                        <div class="s-pro-inner">
                            <div class="s-pro-bg"></div>
                            <div class="s-pro-title">
                                <h2>个人博客</h2>
                            </div>
                            <div class="s-pro-direction">
                                <div class="s-pro-header"></div>
                                <div class="s-pro-arrow" style="justify-content: center;align-items: center">
                                    <a style="cursor: not-allowed;color: white;font-size: 24px" class="boke">点击跳转</a>
                                    <!--                                    <div class="arrow-left"></div>-->
                                    <!--                                    <div class="arrow-right"></div>-->
                                </div>
                                <svg class="icon s-pro-close" aria-hidden="true">
                                    <use xlink:href="#icon-ziyuanldpi"></use>
                                </svg>
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
            <section class="s-pro-foot"> ———— 更多项目 正在上线 ————</section>
        </div>
        <div class="swiper-slide s-contact">
            <section class="s-contact-title"> Contact Me</section>
            <section class="s-contact-desc">
                <p>我是一名对编程满怀热情,对未来充满期待的秃头程序员</p>
                <p>因为对代码的热情让我走进Web前端</p>
                <p>The meaning of life is to struggle</p>
                <p>前路漫漫 道阻且长</p>
                <p>博观而约取 厚积而薄发</p>
                <p>与君共勉 携手未来</p>
                <canvas id="canvas-mb" width="auto" height="auto" class="swiper-no-swiping">
            </section>
            <section class="s-contact-link"><i>
                <svg class="icon gitHub" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
                 <a href="#" target="_blank" class="info-only ">前往Github</a>
            </i>
                <i>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                    <a href="#" target="_blank" class="qqcode"
                       style="background-image: url('./images/mecc/qqcode.jpg')"></a></i> <i>
                    <svg class="icon"
                         aria-hidden="true">
                        <use xlink:href="#icon-wechat"></use>
                    </svg>
                    <a href="javascript:;"
                       style="background-image: url('./images/mecc/wechatcode.jpg')"></a></i> <i>
                    <svg class="icon"
                         aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                    <a href="#" target="_blank" class="info-only">前往新浪微博</a></i>
                <i>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhihu"></use>
                    </svg>
                    <a href="#" class="info-only" target="_blank">前往知乎</a></i></section>
            <!--            <section class="s-contact-foot"> <a href="javascript:location.reload();" class="fuli">一键切换动漫福利</a>-->
            <!--            </section>-->
            <section class="s-web-info"> <span>© MeCC | <a href="#"
                                                           target="_blank">蜀ICP备18034322号</a></span></section>
        </div>
    </div>
</div>


<script src="./javascripts/mecc/jquery-3.3.1.min.js"></script>
<!--<script src="http://172.16.222.5/static/swiper.min.js"></script>-->
<script src="./javascripts/mecc/swiper.min.js.map"></script>
<script src="./javascripts/mecc/iconfont.js"></script>
<script src="./javascripts/mecc/s-project.js"></script>
<script src="./javascripts/mecc/jquery.hover3d.js"></script>
<script src="./javascripts/mecc/skill-cube.js"></script>
<script src="./javascripts/mecc/fireround.js"></script>
<script src="./javascripts/mecc/index.js"></script>
<script>
    window.onerror = function () {
        return true;
    }
</script>
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
    //初始化
    // let vConsole = new VConsole();
    $(".boke").click(function () {
        alert('博客正在维护,晚些时候再来!')
    });
    $(".gitHub").click(function () {
        //跳转git仓库地址
        window.open( 'https://gitee.com/xueBingChuan' )
    });

</script>

</body>

</html>
